<template>
  <div class="image-fall"> 
    <div class="zq-waterfall">
      <!-- 左边 -->
      <div class="zq-waterfall-left">
        <div class="box" v-for="(item,index) in itemsA" :key="index">
          <div 
          class="img-box" 
          @click="videoDetial(item)"
          @touchstart="getTouchStart(item, $event)"
          @touchend="getTouchEnd(item, $event)"
          >
            <img v-if="item.videoImg != ''" :src="item.videoImg" alt="">
            <!-- <video ref="videoPlay" :src="item.img"></video> -->
            <div v-else class="img-error">
              <van-icon name="photo-fail" />
            </div>
          </div>
          <div class="content">
            <div class="title">{{item.title}}</div>
            <span class="tag" >#{{item.tag[0]}}#</span>
            <div class="user">
              <div>
                <img :src="item.userImg" alt="">
                <span class="name">{{item.userName}}</span>
              </div>
              <img :src="item.from" alt="">
            </div>
          </div>
        </div>
      </div>

      <!-- 右边 -->
      <div class="zq-waterfall-right">
        <div class="box" v-for="(item,index) in itemsB" :key="index">
          <div 
          class="img-box"
          @click="videoDetial(item)"
          @touchstart="getTouchStart(item, $event)"
          @touchend="getTouchEnd(item, $event)"
          >
            <img v-if="item.videoImg != ''" :src="item.videoImg" alt="">
            <!-- <video ref="videoPlay" :src="item.img"></video> -->
            <div v-else class="img-error">
              <van-icon name="photo-fail" />
            </div>
            <!-- <video ref="videoRight" :src="item.img"></video> -->
          </div>
          <div class="content">
            <div class="title">{{item.title}}</div>
            <span class="tag">#{{item.tag[0]}}#</span>
            <div class="user">
              <div>
                <img :src="item.userImg" alt="">
                <span class="name">{{item.userName}}</span>
              </div>
              <img :src="item.from" alt="">
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- <div>点击加载跟多</div> -->
  </div>
</template>
<script>
  export default {
    props: {
      items: {
        type: Array
      },
      status: {
        type: Number
      }
    },
    data () {
      return {
        // items: [
        //   { 
        //     img:'https://img2.baidu.com/it/u=1119458334,264352446&fm=26&fmt=auto',
        //     title: '买坦克还要3个月',
        //     tag: '星巢计划',
        //     userImg: 'https://img1.baidu.com/it/u=3045248289,3357650016&fm=26&fmt=auto',
        //     userName: '刘余旭',
        //     fromNum: '1',
        //     from: '抖音'
        //   }
        // ],
        itemsA:[],
        itemsB:[],
        itemTouchTime: false,
        timeOut: '',
        list: [],
        changeTime: new Date().getTime()
      }
    },
    computed: {},
    methods: {
      getImg(url, callback){
        var img = new Image();
        img.src = url;
        //如果图片被缓存，则直接返回缓存数据
        if(img.compltet){
          /* callback(img.width, img.height); */
          callback(img.width, img.height, Number(img.height)/Number(img.width));
        }else{
          //完全加载完毕的事件
          img.onload = function(){
            /* callback(img.width, img.height); */
            callback(img.width, img.height, Number(img.height)/Number(img.width));
          }
        }
      },
      getData(){
        // 加载完页面执行的函数
        let boxA = document.getElementsByClassName('zq-waterfall-left')[0].clientHeight
        let boxB = document.getElementsByClassName('zq-waterfall-right')[0].clientHeight
        let that = this;
        for(let val of this.items){
          // console.log('val',val.videoImg)
          that.getImg(val.videoImg,function () {
            // console.log(w)
            //图片必须存在，否则会置空
            boxA = document.getElementsByClassName('zq-waterfall-left')[0].clientHeight
            boxB = document.getElementsByClassName('zq-waterfall-right')[0].clientHeight
            if(boxA>boxB){
              that.itemsB.push(val)
              // console.log(that.itemsB)
            }else{
              that.itemsA.push(val)
              console.log(that.itemsA)
            }
          })
        }
      }, 
      special(n) {
        if(parseInt(n) === 1){
          return 'douyin'
        } else if (parseInt(n) === 2) {
          return 'dong'
        }
      },
      // 按住屏幕
      getTouchStart(item, e) {
        // this.timeOut = setTimeout(() => {
        //   this.itemTouchTime = true // 1秒后执行该逻辑
        //   this.getTouchEnd(item)
        // }, 2000)
        this.changeTime = new Date().getTime()
        this.timeOut = setTimeout(() => {
          this.getTouchEnd(item)
          this.itemTouchTime = true
          if(new Date().getTime() - this.changeTime >= 1000) {
          }
        }, 1000)
      },
      // 松开屏幕后，弹出确认框
      getTouchEnd(item, e) {
        if((new Date().getTime() - this.changeTime < 1000) && this.status !== undefined) {
        // 逻辑没有被执行，时间不足3秒, 清除setTimeout
          this.changeTime = new Date().getTime()
          clearInterval(this.timeOut)
          console.log('没有执行')
        } else if ( (new Date().getTime() - this.changeTime >= 1000) && this.status !== undefined) {
          let a 
          if(this.status === 0) {
            a = "足迹"
          } else {
            a = "收藏"
          }
          this.$dialog.confirm({
            title: '确认信息',
            message: '确定删除该'+a+"吗？",
          })
            .then(() => {
              // 确定删除
              /*
                1. 获取item.id
                2. 获取item.id在整个数组中的index
                3. 把index发回给父组件，父组件也要删除该下标的元素
                4. 刷新页面
               */
              let itemsId = this.items.map(item => {
                return item.id
              })
              let index = itemsId.indexOf(item.id)
              console.log('itemId', itemsId)
              console.log('确定删除的id：', item.id)
              console.log('id在父组件里整个数组中的index：', index)
              // this.items.splice(index,1)
              this.$emit('func',index)
            })
            .catch(() => {
              // 取消删除
            });

        }
        this.itemTouchTime = false
      },
      // 跳转到视频详情页
      videoDetial(item) {
        // console.log(item.id)
        this.$router.push({
          name: 'videoPlaying',
          query: {
            id: item.id
          }
        })
      },
      // 比较左右两个容器的大小
      getHeight() {
        // let hleft = document.getElementsByClassName('zq-waterfall-left')[0].clientHeight
        // let hright = document.getElementsByClassName('zq-waterfall-right')[0].clientHeight
        this.items.map(item => {
          if(item.videoImg === '' || item.videoImg === null) {
            this.handelVideo(item)
          } else {
            console.log('不空')
          }
        })
        for(let i = 0; i < this.items.length; i++) {
          // console.log(this.items[i])
          if(this.itemsA.length > this.itemsB.length) {
            this.itemsB.push(this.items[i])
          } else {
            this.itemsA.push(this.items[i])
          }
        }
      },
      // 处理视频，获取视频截图
      handelVideo(item) {
        let video = document.createElement('video')
        // console.log(element.img.slice(52))
        item.img = 'imgCrossDomain/' +  item.img.slice(52)
        video.setAttribute("crossOrigin",'anonymous')
        video.setAttribute('src', item.img);
        video.currentTime = 2
        // console.log(video)
        video.addEventListener('loadeddata', () => {
          let canvas = document.createElement("canvas")
          canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height)
          let url = canvas.toDataURL('image/png', 1)
          item.videoImg = url
        })
      }
    },
    mounted() {
      // this.handelVideo()
      this.getHeight()
      console.log(this.items)
    },
    beforeDestroy(){
      clearInterval(this.timeOut);　　// 清除定时器
    },
  }
</script>
<style scoped lang="less">
.douyin{
  background-color: black;
  color: white;
}
.dong{
  background-color: #FFC600;
  color: #333333;
}
.zq-waterfall{
  // padding: 16px;
  .box{
    margin-bottom: 8px;
    .img-box{
      //  width: 100%;
      img{
        // background: white;
         width: 100%;
        // height: 100%;
      }
      .img-error{
        width: 100%;
        height: 100px;
        background-color: #bbb9b9;
        text-align: center;
        line-height: 100px;
        font-size: 50px;
        color: #666666;
      }
    }
    .content{
      height: 96px;
      background-color: white;
      padding: 12px;
      box-sizing: border-box;
      font-size: 14px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      .title{
        color: #000000;
      }
      .tag{
        color: #FFC600;
        padding-right: 5px;
      }
      .user{
        font-size: 12px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-top: 12px;
        div{
          display: flex;
          align-items: center;
          img{
            width: 20px;
            height: 20px;
            border-radius: 50%;
            // padding-right: 8px;
          }
          .name{
            padding-left: 8px;
            color: #666666;
          }
        }
        img{
          width: 40px;
          height: 15px;
        }
      }
    }
  }
  .zq-waterfall-left{
    float: left;
    width: calc(~"50% - 4.5px");
    margin-right: 4.5px;
  }
  .zq-waterfall-right{
    float: left;
    width: calc(~"50% - 4.5px");
    margin-left: 4.5px;
  }
}
</style>
